.task-block {
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  @include flex-center;
  justify-content: space-between;
  &:not(:first-child) {
    margin-top: 20px;
  }

  &__text-group {
    display: flex;
  }

  &__sequence {
    width: 19px;
    height: 19px;
    @include flex-center;
    border-radius: 50%;
    font-size: 13px;
    font-weight: bold;
    color: #ffe165;
    align-self: flex-start;
    background-image: linear-gradient(to bottom, #308000, #dfb600 150%);
  }

  &__desc {
    max-width: 193px;
    font-size: 14px;
    font-weight: bold;
    color: #4c8800;
    margin-left: 10px;
  }

  &__btn {
    width: 110px;
    height: 40px;
    border-radius: 26px;
    @include flex-center;
    // ÷http://fepublicty.tiyalive.com/tiya/activities/us-halloween/banner.png
    background: url(http://fepublicty.tiyalive.com/tiya/activities/us-halloween/task-btn@2x.png) no-repeat;
    background-size: cover;
    text-shadow: 0 1px 0 #ffe58c;
    font-size: 14px;
    font-weight: 900;
    color: #cc5316;
  }

  &--complete {
    opacity: .6;
    pointer-events: none;

    .task-block__btn {
      border: solid 2px #ffffd4;
      background-image: linear-gradient(to bottom, #ffe284, #ffba5c 99%);
    }
  }
}
